<template>
  <div class="forest">
    <Top></Top>
    <div class="main">
      <div class="left_box">
        <div class="woodland">
          <div class="trapezoid"></div>
          <div class="woodland_title">林地</div>
          <div class="top">
            <div class="contents">
              <div class="num">{{ woodland.totalarea }}</div>
              <div class="text">总面积(km²)</div>
            </div>
            <div class="contents">
              <div class="num">{{ woodland.area }}</div>
              <div class="text">重点防火区域(km²)</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="bottom">
            <div class="txt">
              <p>
                防火隔离带(条) <span>{{ woodland.num }}</span>
              </p>
              <div class="tips">
                {{ woodland.name || "暂无数据！" }}
              </div>
            </div>
          </div>
        </div>
        <div class="patrol">
          <div class="patrol_title">本年度巡查</div>
          <div class="trapezoid"></div>
          <div class="content">
            <div class="num">{{ patrol.patrol_num | Statistic1 }}</div>
            <div class="text">报警巡查(次)</div>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="monitor">
          <div class="monitor_title">感知元</div>
          <div class="trapezoid"></div>
          <div class="con_box">
            <div class="item">
              <img src="../../assets/tfxq/imgs/gaokongyuntai.png" alt="" />
              <div class="num">{{ monitor.num1 }}</div>
              <div class="text">热成像双光谱重载云台(个)</div>
            </div>
            <div class="item">
              <img src="../../assets/tfxq/imgs/dibiaohuo.png" alt="" />
              <div class="num">{{ monitor.num2 }}</div>
              <div class="text">地表火探测器(个)</div>
            </div>
            <div class="item">
              <img src="../../assets/tfxq/imgs/hanshuilv.png" alt="" />
              <div class="num">{{ monitor.num3 }}</div>
              <div class="text">可燃物含水率(个)</div>
            </div>
            <div class="item">
              <img src="../../assets/tfxq/imgs/wuhoujiance.png" alt="" />
              <div class="num">{{ monitor.num4 }}</div>
              <div class="text">物候监测(个)</div>
            </div>
            <div class="item">
              <img src="../../assets/tfxq/imgs/qixiangzhan.png" alt="" />
              <div class="num">{{ monitor.num5 }}</div>
              <div class="text">气象站(个)</div>
            </div>
          </div>
        </div>

        <div class="warning">
          <!-- 资源 -->
          <div class="resources">
            <div class="resources_title">资源</div>
            <div class="trapezoid"></div>
            <div class="res_con">
              <div class="item">
                <div class="con">
                  <img src="../../assets/tfxq/imgs/森林-管护站.png" alt="" />
                  <div class="right">
                    <div class="num">{{ resources.num1 }}</div>
                    <div class="text">管理站(个)</div>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="con">
                  <img src="../../assets/tfxq/imgs/森林-管护人员.png" alt="" />
                  <div class="right">
                    <div class="num">{{ resources.num2 }}</div>
                    <div class="text">管护人员(名)</div>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="con">
                  <img src="../../assets/tfxq/imgs/森林-扑火车.png" alt="" />
                  <div class="right">
                    <div class="num">{{ resources.num3 }}</div>
                    <div class="text">扑火车(辆)</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 预警 -->
          <div class="yujing">
            <div class="yujing_title">本年度预警</div>
            <div class="trapezoid"></div>
            <div class="yujing_box">
              <div class="grade">
                <div class="tips">
                  <div class="left">街道</div>
                  <div class="left">预警等级</div>
                </div>
                <div
                  class="content"
                  v-for="(item, index) in grade"
                  :key="index"
                >
                  <div class="text">{{ item.name }}</div>
                  <div class="num">{{ item.age }}级</div>
                </div>
                <div class="a" id="a" style="height: 100%; width: 100%"></div>
              </div>
              <div class="warning-tips">
                <div class="left">
                  <div class="num">{{ fire.num1 }}</div>
                  <div class="text">可燃物易燃点位（个）</div>
                </div>
                <div class="right">
                  <div class="num">{{ fire.num2 }}</div>
                  <div class="text">发生火情（次）</div>
                </div>
              </div>
              <!-- 图表 -->
              <div class="echartsContent" id="echartsContent"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    <Bottom></Bottom>-->
  </div>
</template>

<script>
import Top from "@/components/top/Top.vue";
import local from "@/utils/local";
import store from "@/store";
import Bottom from "@/components/bottom/Bottom.vue";
import * as echarts from "echarts";
import { getnum } from "@/api/atmosphere";

export default {
  components: {
    Top,
    Bottom,
  },
  name: "Forest",
  data() {
    return {
      timestamp: "",
      Encrypteddata: "",
      accountId: store.state.loginUserInfi.accountId,
      grade: [
        {
          id: 1,
          name: "华阳街道",
          age: 0,
        },
        {
          id: 2,
          name: "万安街道",
          age: 0,
        },
        {
          id: 3,
          name: "正兴街道",
          age: 0,
        },
        {
          id: 4,
          name: "兴隆街道",
          age: 0,
        },
        {
          id: 5,
          name: "永兴街道",
          age: 0,
        },
        {
          id: 6,
          name: "煎茶街道",
          age: 0,
        },
        {
          id: 7,
          name: "籍田街道",
          age: 0,
        },
        {
          id: 8,
          name: "太平街道",
          age: 0,
        },
      ],
      num: 5056,
      chart: {
        dbhtcqbj: "", //地表火探测报警
        gkytbj: "", //高空云台报警
        wxrdbj: "", //卫星热点报警
      },
      // 林地
      woodland: {
        totalarea: 2938,
        area: 278,
        num: 0,
        name: "",
      },
      // 监测
      monitor: {
        num1: 1,
        num2: 1,
        num3: 1,
        num4: 1,
        num5: 1,
      },
      // 巡查
      patrol: {
        patrol_num: 1,
      },
      // 资源
      resources: {
        num1: 1,
        num2: 1,
        num3: 1,
      },
      // 预警
      warning: {
        grade: 2,
      },
      // echarts
      echarts: {
        num1: 25,
        num2: 56,
        num3: 96,
      },
      fire: {
        num1: 1,
        num2: 1,
      },
    };
  },
  mounted() {
    // 缓存执行
    setTimeout(() => {
      this.drawLine();
    }, 500);
  },
  async created() {
    this.dataRefreh();
    await this.nums();
    await this.nums1();
    await this.time();
    await this.fun1();
    await this.fun2();
  },
  filters: {
    // 千分位
    Statistic1(num) {
      num = parseFloat(Number(num).toFixed(3));
      let [integer, decimal] = String.prototype.split.call(num, ".");
      integer = integer.replace(/\d(?=(\d{3})+$)/g, "$&,"); // 正则先行断言
      return `${integer}${decimal ? "." + decimal : ""}`;
    },
  },
  methods: {
    async time() {
      var host = window.location.host;
      var url;
      if (process.env.NODE_ENV === "production") {
        if (host == "10.31.215.133:44308") {
          url = "http://10.31.215.133:44308/Home/TestTS";
        } else {
          url = "http://10.46.81.26:44308/Home/TestTS";
        }
      } else {
        // 开发环境
        url = "http://36.111.191.34:44309/Home/TestTS";
      }
      var that = this;
      // http://36.111.191.34:44309/Home/TestTS 开发
      // http://10.31.215.133:44308/Home/TestTS 生产
      await that.$axios.get(url).then(function (res) {
        that.timestamp = res.data.OriginalData;
        that.Encrypteddata = res.data.Encrypteddata;
      });
    },
    fun1() {
      var that = this;
      var host = window.location.host;
      var urlApi;
      if (process.env.NODE_ENV === "production") {
        if (host == "10.31.215.133:44308") {
          urlApi =
            "http://10.31.215.101:8779/api/authority/plat/sso/getAlarmInfo"; //内网
        } else {
          urlApi =
            "http://10.46.81.26:8779/api/authority/plat/sso/getAlarmInfo"; //外网
        }
      } else {
        // 开发环境
        urlApi =
          "https://61.128.194.224:8333/api/authority/plat/sso/getAlarmInfo";
      }
      that
        .$axios({
          method: "post",
          headers: {
            Authorization: `accountId ${that.accountId},OriginalData ${that.timestamp},Encrypteddata ${that.Encrypteddata}`,
          },
          url: urlApi,
        })
        .then((res) => {
          that.patrol.patrol_num = res.data.data.bjxc_num;
          that.chart.dbhtcqbj = res.data.data.dbhtcqbj;
          that.chart.gkytbj = res.data.data.gkytbj;
          that.chart.wxrdbj = res.data.data.wxrdbj;
        });
    },
    fun2() {
      var that = this;
      var host1 = window.location.host;
      var urlApi2;
      if (process.env.NODE_ENV === "production") {
        if (host1 == "10.31.215.133:44308") {
          urlApi2 =
            "http://10.31.215.101:8779/api/authority/plat/sso/getExhibitionInfo";
        } else {
          urlApi2 =
            "http://10.46.81.26:8779/api/authority/plat/sso/getExhibitionInfo";
        }
      } else {
        // 开发环境
        urlApi2 =
          "https://61.128.194.224:8333/api/authority/plat/sso/getExhibitionInfo";
      }
      that
        .$axios({
          method: "post",
          headers: {
            Authorization: `accountId ${that.accountId},OriginalData ${that.timestamp},Encrypteddata ${that.Encrypteddata}`,
          },
          url: urlApi2,
        })
        .then((res2) => {
          that.monitor.num1 = res2.data.data.jiance.gkyt;
          that.monitor.num2 = res2.data.data.jiance.dbh;
          that.monitor.num3 = res2.data.data.jiance.krwhsl;
          that.monitor.num4 = res2.data.data.jiance.whjc;
          that.monitor.num5 = res2.data.data.jiance.qxz;
          // 林地
          that.woodland.name = res2.data.data.lindi.w_zymc;
          that.woodland.num = res2.data.data.lindi.fh_lds || 0;
          // 预警
          that.fire.num1 = res2.data.data.yujing.krwyrdw;
          that.fire.num2 = res2.data.data.yujing.fshz_num;
          // 街道
          that.grade[0].age = res2.data.data.yujing.yjdj_hy || 0;
          that.grade[1].age = res2.data.data.yujing.yjdj_wa || 0;
          that.grade[2].age = res2.data.data.yujing.yjdj_zx || 0;
          that.grade[3].age = res2.data.data.yujing.yjdj_xn || 0;
          that.grade[4].age = res2.data.data.yujing.yjdj_yx || 0;
          that.grade[5].age = res2.data.data.yujing.yjdj_jc || 0;
          that.grade[6].age = res2.data.data.yujing.yjdj_jt || 0;
          that.grade[7].age = res2.data.data.yujing.yjdj_tp || 0;

          // 资源
          that.resources.num1 = res2.data.data.ziyuan.ghz;
          that.resources.num2 = res2.data.data.ziyuan.ghry;
          that.resources.num3 = res2.data.data.ziyuan.phc;
        });
    },
    // 定时刷新数据函数 10分钟
    dataRefreh() {
      setInterval(() => {
        window.location.reload();
      }, 600000);
    },
    // 总面积
    async nums() {
      try {
        let res = await getnum({
          restypeid: 3101,
        });
        this.woodland.totalarea = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async nums1() {
      try {
        let res = await getnum({
          restypeid: 3102,
        });
        this.woodland.area = res.data;
      } catch (err) {
        console.log(err);
      }
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("echartsContent"));
      // 绘制图表
      var option = {
        grid: {
          x: 45,
          y: 45,
          x2: 5,
          y2: 20,
          borderWidth: 1,
        },
        tooltip: {},
        // legend: {
        //     data:['销量']
        // },
        xAxis: {
          axisTick: {
            show: false,
          },
          data: ["高空云台报警", "地表火探测器报警", "卫星热点报警"],
          axisLabel: {
            textStyle: {
              color: "rgb(156,206,241)",
              fontSize: 10,
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgb(54,86,163)",
            },
          },
        },
        yAxis: {
          // data: ["", "5000", "10000", "15000", "20000"],
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgb(54,86,163)",
              width: 0.3,
              type: "solid",
            },
          },
          // data: [0, 5000, 10000, 15000,20000],
          axisLabel: {
            textStyle: {
              color: "rgb(54,86,163)",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgb(54,86,163)",
            },
          },
        },
        series: [
          {
            type: "bar",
            data: [this.chart.gkytbj, this.chart.dbhtcqbj, this.chart.wxrdbj],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  color: "white",
                },
              },
              color: {
                type: "linear", // 线性渐变
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#D0CE14",
                  },
                  {
                    offset: 1,
                    color: "#B0800D",
                  },
                ],
              },
            },
            barWidth: "25%", //柱状图宽度
          },
        ],
        // 高亮样式。
        emphasis: {
          itemStyle: {
            // 高亮时点的颜色。
            color: "red",
          },
        },
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      //当界面宽高发生改变时重新加载echart图
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>
<style>
/* 自定义字体 DS-DIGIB（棍型字体） */
@font-face {
  /* font-properties */
  font-family: cudgelFont;
  src: url("../../assets/tfxq/typeface/DS-DIGIB.TTF");
  /* IE9 */
}
</style>
<style lang="less" scoped>
.forest {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main {
  height: 100%;
  display: flex;
  position: relative;
}

/* 梯形 */
.trapezoid {
  width: 1.6rem;
  height: 0;
  margin: auto;
  border-top: 0.375rem solid rgb(27, 58, 124);
  border-right: 0.4625rem solid transparent;
  border-left: 0.4625rem solid transparent;
}

.left_box {
  width: 25%;
  height: 70%;
  margin-left: 0.25rem;
  margin-top: 0.25rem;
  position: relative;
  float: left;
}

.main > .right {
  width: 70%;
  height: 70%;
  margin-top: 0.25rem;
  float: right;
  position: relative;
  overflow: hidden;
  margin-left: 0.375rem;
}

.woodland {
  width: 100%;
  height: 65%;
  background: rgba(26, 37, 67, 0.6);
  overflow: hidden;
  position: relative;

  &::before {
    position: absolute;
    top: 0.5px;
    left: 1px;
    width: 0.266667rem /* 20/75 */;
    height: 0.266667rem /* 20/75 */;
    border-left: 0.025rem solid #2d66cb;
    border-top: 0.025rem solid #2d66cb;
    content: "";
  }

  &::after {
    position: absolute;
    top: -0.5px;
    right: 1px;
    width: 0.266667rem /* 20/75 */;
    height: 0.266667rem /* 20/75 */;
    border-right: 0.025rem solid #2d66cb;
    border-top: 0.025rem solid #2d66cb;
    content: "";
  }
}

.woodland .woodland_title {
  position: absolute;
  left: 46%;
  color: #fff;
  top: 0.066667rem /* 5/75 */;
}

.woodland .top {
  width: 90%;
  height: 40%;
  margin: 0.266667rem /* 20/75 */ auto 0.133333rem /* 10/75 */;
  display: flex;
  overflow: hidden;
  justify-content: space-around;
}

.woodland .top .contents {
  width: 48%;
  height: 70%;
  text-align: center;
  background: url("../../static/天府新区/切图/森林-林地.png") no-repeat;
  background-size: cover;
}

.woodland .top .contents .num {
  margin-top: 0.266667rem /* 20/75 */;
  font-family: cudgelFont;
  font-size: 0.45rem /* 22/75 */;
  color: rgb(249, 175, 35);
  font-weight: 700;
}

.woodland .top .contents .text {
  margin-top: 0.125rem;
  color: rgba(156, 219, 251);
}

.woodland .line {
  width: 90%;
  border: 0.006667rem /* 0.5/75 */ dashed rgb(119, 181, 223);
  margin: auto;
}

.woodland .bottom {
  width: 90%;
  height: 40%;
  margin: 0.533333rem /* 40/75 */ auto 0.133333rem /* 10/75 */;
  overflow: hidden;
}

.woodland .bottom p {
  color: rgba(156, 219, 251);
}

.woodland .bottom span {
  font-size: 0.35rem /* 22/75 */;
  color: rgb(249, 175, 35);
  font-weight: 700;
  margin-left: 0.066667rem /* 5/75 */;
}

.woodland .bottom .tips {
  width: 100%;
  min-height: 0.533333rem /* 40/75 */;
  line-height: 0.533333rem /* 40/75 */;
  padding-left: 0.266667rem /* 20/75 */;
  margin: 10px auto;
  background: rgba(24, 46, 85, 0.6);
  color: rgb(67, 226, 234);
}

.patrol {
  width: 100%;
  height: 30%;
  background: url("../../assets/tfxq/imgs/森林-巡查.png") no-repeat;
  position: absolute;
  bottom: 0;
  background-size: cover;

  &::before {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 0.266667rem /* 20/75 */;
    height: 0.266667rem /* 20/75 */;
    border-left: 0.025rem solid #2d66cb;
    border-top: 0.025rem solid #2d66cb;
    content: "";
  }

  &::after {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 0.266667rem /* 20/75 */;
    height: 0.266667rem /* 20/75 */;
    border-right: 0.025rem solid #2d66cb;
    border-top: 0.025rem solid #2d66cb;
    content: "";
  }
}

.patrol .patrol_title {
  position: absolute;
  left: 42%;
  color: #fff;
  top: 0.066667rem /* 5/75 */;
}

.patrol .content {
  width: 12.5rem;
  height: 1.333333rem /* 100/75 */;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.patrol .content .num {
  margin-top: 0.266667rem /* 20/75 */;
  font-size: 0.45rem;
  font-family: cudgelFont;
  /* 26/75 */
  color: rgb(249, 175, 35);
  font-weight: 700;
}

.patrol .content .text {
  margin-top: 0.266667rem /* 20/75 */;
  color: rgba(156, 219, 251);
}

.monitor {
  background: rgba(26, 37, 67, 0.6);
  width: 100%;
  height: 35%;
  position: relative;

  &::before {
    position: absolute;
    top: -0.5px;
    left: 1px;
    width: 0.266667rem /* 20/75 */;
    height: 0.266667rem /* 20/75 */;
    border-left: 0.025rem solid #2d66cb;
    border-top: 0.025rem solid #2d66cb;
    content: "";
  }

  &::after {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 0.266667rem /* 20/75 */;
    height: 0.266667rem /* 20/75 */;
    border-right: 0.025rem solid #2d66cb;
    border-top: 0.025rem solid #2d66cb;
    content: "";
  }
}

.monitor .monitor_title {
  position: absolute;
  left: 48.5%;
  color: #fff;
  top: 0.066667rem /* 5/75 */;
}

.monitor .con_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 0.266667rem /* 20/75 */;
  /* align-items: center; */
}

.monitor .item {
  width: 20%;
  text-align: center;
  overflow: hidden;
}

.monitor .item img {
  width: 15%;
}

.monitor .item .num {
  font-family: cudgelFont;
  margin-top: 0.266667rem /* 20/75 */;
  font-size: 0.45rem /* 22/75 */;
  color: rgba(22, 210, 214);
  /*  font-family:dsdigital; */
}

.monitor .item .text {
  margin-top: 0.066667rem /* 5/75 */;

  color: rgba(156, 219, 251);
}

.warning {
  width: 100%;
  height: 60%;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-between;

  &::before {
    position: absolute;
    top: -1px;
    left: 2px;
    width: 0.266667rem /* 20/75 */;
    height: 0.266667rem /* 20/75 */;
    border-left: 0.025rem solid #2d66cb;
    border-top: 0.025rem solid #2d66cb;
    content: "";
  }

  &::after {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 0.266667rem /* 20/75 */;
    height: 0.266667rem /* 20/75 */;
    border-right: 0.025rem solid #2d66cb;
    border-top: 0.025rem solid #2d66cb;
    content: "";
  }
}

.warning .resources {
  width: 25%;
  height: 100%;
  background: #1a254399;
  overflow: hidden;
  position: relative;

  &::before {
    position: absolute;
    top: -1px;
    left: 1px;
    width: 0.266667rem /* 20/75 */;
    height: 0.266667rem /* 20/75 */;
    border-left: 0.025rem solid #2d66cb;
    border-top: 0.025rem solid #2d66cb;
    content: "";
  }

  &::after {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0.266667rem /* 20/75 */;
    height: 0.266667rem /* 20/75 */;
    border-right: 0.025rem solid #2d66cb;
    border-top: 0.025rem solid #2d66cb;
    content: "";
  }
}

.warning .resources .resources_title {
  position: absolute;
  left: 45%;
  color: #fff;
  top: 0.066667rem /* 5/75 */;
}

.warning .resources .res_con {
  width: 100%;
  height: 100%;
}

.warning .resources .item {
  width: 80%;
  height: 24%;
  background: rgba(24, 46, 85, 0.6);
  margin: 0.133333rem /* 10/75 */ auto;
}

.warning .resources .item .con {
  width: 80%;
  height: 100%;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.warning .resources .item .con img {
  width: 20%;
  position: absolute;
  top: 28%;
  left: 0;
}

.warning .resources .item .con .right {
  width: 60%;
  position: absolute;
  right: 0.133333rem /* 10/75 */;
  top: 20%;
}

.warning .resources .item .con .num {
  font-size: 0.325rem;
  font-family: cudgelFont;
  /* 16/75 */
  color: rgb(239, 243, 116);
  font-weight: 700;
  margin-left: 0.266667rem /* 20/75 */;
}

.warning .resources .item .con .text {
  font-size: 0.186667rem /* 14/75 */;
  color: rgb(119, 181, 223);
  margin-top: 0.08rem /* 6/75 */;
  margin-left: 0.266667rem /* 20/75 */;
}

.warning .yujing {
  width: 72%;
  height: 100%;
  background: rgba(26, 37, 67, 0.6);
  position: relative;
}

.warning .yujing .yujing_box {
  /* width: 100%; */
  height: 100%;
  display: flex;
  background: rgba(26, 37, 67, 0.6);
  justify-content: space-between;
}

.warning .yujing .yujing_title {
  position: absolute;
  left: 46.5%;
  color: #fff;
  top: 0.066667rem /* 5/75 */;
}

.warning .yujing .grade {
  width: 30%;
  height: 100%;
  flex-wrap: wrap;
  position: absolute;
  left: 0.375rem;
  background: rgba(44, 79, 147, 0.1);
  background-size: 100% 100%;
}

.warning .yujing .grade .tips {
  display: flex;
  text-align: center;
  justify-content: space-between;
  color: #fff;
  height: 30px;
  align-items: center;
  background: rgb(44, 79, 147);
}

.warning .yujing .grade .tips .left {
  width: 50%;
}

.warning .yujing .grade .tips .right {
  width: 50%;
}

.warning .yujing .grade .content {
  display: flex;
  text-align: center;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 10% /* 100/75 */;
  text-align: center;
  overflow: hidden;
}

.warning .yujing .grade .content:nth-child(2n-1) {
  background: rgb(30, 53, 97);
}

.warning .yujing .grade .content .num {
  /* 20/75 */
  font-size: 0.175rem;
  color: #f5a32f;
}

.warning .yujing .grade .content .text {
  color: #47eff5;
  font-size: 0.175rem;
}

.warning .warning-tips {
  width: 50%;
  height: 26%;
  position: absolute;
  top: 30px;
  background: rgba(24, 46, 85, 0.6);
  right: 5%;
  top: 18%;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}

.warning .warning-tips .left {
  width: 50%;
  position: relative;

  &::after {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0.266667rem /* 20/75 */;
    height: 100%;
    border-right: 0.006667rem /* 0.5/75 */ solid #2d66cb;
    content: "";
  }
}

.warning .warning-tips .right {
  width: 50%;
}

.warning .warning-tips .num {
  font-size: 0.325rem;
  color: #f5a42f;
}

.warning .warning-tips .text {
  font-size: 0.175rem;
  color: #9adaf8;
  margin-top: 0.125rem;
}

// .warning .warning-tips .right .num {
//   margin-top: -6px;
// }

.warning .yujing .echartsContent {
  width: 60%;
  height: 60%;
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
